import React from "react";
import { Link } from "react-router-dom";
import { Route, Routes, Navigate, useLocation } from "react-router";
import Kanban from "screens/kanban";
import Epic from "screens/epic";
import styled from "@emotion/styled";
import { Menu } from "antd";

const Container = styled.div`
  display: grid;
  grid-template-columns: 16rem 1fr;
  overflow: hidden;
  width: 100%;
`;

const Aside = styled.aside`
  background: rgb(244, 245, 247);
  display: flex;
  flex-direction: column;
`;

const Main = styled.div`
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
`;

const useRouteType = () => {
  return useLocation().pathname.split("/").pop() as string;
};

const ProjectDetails = () => {
  const routeType = useRouteType();
  return (
    <Container>
      <Aside>
        <Menu
          selectedKeys={[routeType]}
          mode="inline"
          style={{ height: "100%" }}
        >
          <Menu.Item key="kanban">
            <Link to="kanban">看板</Link>
          </Menu.Item>
          <Menu.Item key="epic">
            <Link to="epic">任务组</Link>
          </Menu.Item>
        </Menu>
      </Aside>
      <Main>
        <Routes>
          <Route path="kanban" element={<Kanban />} />
          <Route path="epic" element={<Epic />} />
          <Navigate to="kanban" replace />
        </Routes>
      </Main>
    </Container>
  );
};

export default ProjectDetails;
